<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-datable</title>
<style type="text/css">
*
    {
    margin:0;
    padding:0;
    }

html,
body
    {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
    overflow:hidden;
    }

body,body *
    {
    font-family : "Arial","宋体";
    font-size: 9pt;
    }

body
    {
    border:0;
    background:#f9f9f9;
    }

img
    {
    border:0;
    vertical-align:middle;
    }

table
    {
    table-layout:fixed;
    border-collapse:collapse;
    }
div
    {
    outline:0;
    }

.ipost
    {
    margin:5px auto;
    position:relative;
    border:1px solid #51b847;
    width:800px;
    background:url('../skin/tsbg256.png') right bottom no-repeat;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    }
    .ipost .postit
        {
        margin-top:16px;
        height:32px;
        line-height:30px;
        width:70%;
        background:#51b847;
        color:#fff;
        font-size:16pt;
        text-indent:32px;
        -moz-border-radius: 0 0 32px 0;
        -webkit-border-radius: 0 0 32px 0;
        border-radius: 0 0 32px 0;
        text-shadow:#000 1px 1px 1px;
        }
        .ipost .postit a.tat
            {
            color:#fff;
            font-size:16pt;
            text-decoration:none;
            border-bottom:2px ridge #ffb411;
            }
    .ipost .postcont
        {
        padding:16px;
        font-size:11pt;
        min-height:100px;
        }
    .ipost .postinfo
        {
        margin:0 8px 8px;
        height:20px;
        line-height:20px;
        }
        .ipost .postinfo .ico
            {
            width:16px;
            height:16px;
            margin:0 2px 2px 6px;
            }
.imsg,.imsg-odd
    {
    border-bottom:1px solid #51b847;
    text-indent:16px;
    padding:5px 0;
    }
.imsg-odd
    {
    border-bottom:1px solid #ffb411;
    }
.idatable
    {
    width:100%;
    border:1px solid #bbb;
    }
    .idatable .capt
        {
        line-height:23px;
        }
    .idatable .dthead .dhead,
    .idatable .dtfoot .dfoot,
    .idatable .dtbody .ditem,
    .idatable .dtbody .odd
        {
        line-height:23px;
        border:1px solid #bbb;
        background:#f0f3ff;
        }
    .idatable .dthead .dhead,
    .idatable .dtfoot .dfoot
        {
        background:#cdf;
        }
    .idatable .dtbody .odd
        {
        background:#f2f8ee;
        }
    .idatable .dtbody .hover
        {
        background:#ffc;
        }
    .idatable .dtbody .checked
        {
        background:#f0c06f;
        }
        .idatable .dthead .dhead .col0,
        .idatable .dtfoot .dfoot .col0,
        .idatable .dtbody .ditem .col0
            {
            width:23px;
            border:1px solid #bbb;
            text-align:center;
            }
        .idatable .dthead .dhead .col,
        .idatable .dtfoot .dfoot .col,
        .idatable .dtbody .ditem .col
            {
            border:1px solid #bbb;
            }
        .idatable .dthead .dhead .colnone,
        .idatable .dtfoot .dfoot .colnone,
        .idatable .dtbody .ditem .colnone
            {
            width:auto;
            text-align:center;
            }
</style>
</head>

<body>
<div class="ipost">
    <div class="postit"><a href="#goto" class='tat'>title - 标题</a></div>
    <div class="postcont">
<table class="idatable">
<caption class="capt">tttt
</caption>
    <thead class="dthead">
        <tr class="dhead" onclick="alert(this.rowIndex);">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
       </tr>
        <tr class="dhead" onclick="alert(this.sectionRowIndex);">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
       </tr>
    </thead>
    <tbody class="dtbody">
        <tr class="ditem odd" onclick="alert(this.rowIndex);">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta    contents</td>
            <td>ta    contents</td>
        </tr>
        <tr class="ditem" onclick="alert(this.sectionRowIndex);">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta    contents</td>
            <td>ta    contents</td>
        </tr>
    </tbody>
    <tfoot class="dtfoot">
        <tr class="dfoot" onclick="alert(this.sectionRowIndex);">
            <td class="col0">&#8721;</td>
            <td>ta odd</td>
            <td>ta odd</td>
        </tr>
        <tr class="dfoot" onclick="alert(this.rowIndex);">
            <td class="col0">&#8721;</td>
            <td>ta odd</td>
            <td>ta odd</td>
        </tr>
    </tfoot>
</table>

<table class="idatable">
<thead class="dthead"><tr class="dhead dfilter">
<td class="col0"><button type="button" class="rebtn" onclick="getcspv();"><img src="/icos/arrow_refresh.png" class="reico"></button></td><td class="col px140">{{mystore.name}}</td>
{% for pvt in pvtypes %}<td class="col px80r" title="{{pvt.name}}">{{pvt.code}}</td>{% endfor %}
<td class="colnone"></td>
</tr></thead>
<tbody class="dtbody">
<tr class="ditem odd">
<td class="col0">1</td><td class="col">上期余额</td>
{% for pvt in pvtypes %}<td id="{{mystore.code}}{{pvt.code}}a" class="col px80r">0</td>{% endfor %}
<td class="colnone"></td>
</tr>
<tr class="ditem">
<td class="col0">2</td><td class="col">本期进货</td>
{% for pvt in pvtypes %}<td id="{{mystore.code}}{{pvt.code}}b" class="col px80r">0</td>{% endfor %}
<td class="colnone"></td>
</tr>
</tbody>
<tfoot class="dtfoot">
<tr class="dfoot"><td class="col0">∑</td><td class="col">本期合计</td>
{% for pvt in pvtypes %}<td id="{{mystore.code}}{{pvt.code}}z" class="col px80r">0</td>{% endfor %}
<td class="colnone"></td>
</tr></tfoot>
</table>
</div>
    <div class="postinfo">
    <img src="../../icos/user.png" class='ico' alt="" /><span>用户名称@网站网址</span>
    <img src="../../icos/date.png" class='ico' alt="" /><span>2010-08-27 17:01</span>
    <img src="../../icos/folder.png" class='ico' alt="" /><span>分类名称分类</span>
    <img src="../../icos/tag_purple.png" class='ico' alt="" /><span>标签一，标签二</span>
    <img src="../../icos/cursor.png" class='ico' alt="" /><span>9999</span>
    <img src="../../icos/comments.png" class='ico' alt="" /><span>9999</span>
    </div>
</div>
<table class="idatable">
<caption class="capt">tttt
</caption>
    <thead class="dthead">
        <tr class="dhead">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
        </tr>
        <tr class="dhead">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
        </tr>
    </thead>
    <tbody class="dtbody">
        <tr class="ditem odd">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
        </tr>
        <tr class="ditem">
            <td class="col0"><input type="checkbox" /></td>
            <td>ta</td>
            <td>ta</td>
        </tr>
    </tbody>
    <tfoot class="dtfoot">
        <tr class="dfoot">
            <td class="col0">&#8721;</td>
            <td>ta odd</td>
            <td>ta odd</td>
        </tr>
        <tr class="dfoot">
            <td class="col0">&#8721;</td>
            <td>ta odd</td>
            <td>ta odd</td>
        </tr>
    </tfoot>
</table>
</body>
</html>